<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" type="border-card" class="card-tabs h-full" @tab-click="handleClick">
			<el-tab-pane :label="$t('left.numberMaterialDiffence')" name="first" class="h-full">
				<div class="layout-padding-auto ">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true">

						<el-form-item :label="$t('left.ProduceEndTime')" prop="produceEndTime">
							<div class="block">
								<el-date-picker v-model="produceEndTime" clearable type="daterange" unlink-panels
									range-separator="To" start-placeholder="Start date" end-placeholder="End date"
									:shortcuts="shortcuts" />
							</div>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" icon="search"  @click="query">{{ $t('so.query')
								}}</el-button>
							<el-button  icon="refresh"  @click="resetQuery">{{ $t('so.reset')
								}}</el-button>
						</el-form-item>

					</el-form>
					<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
						style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
						:header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="productionLineCode" :label="$t('left.productionLineCode')"
							show-overflow-tooltip />
						<el-table-column prop="putinMaterialCode" :label="$t('left.PutinMaterialCode')"
							show-overflow-tooltip />
						<el-table-column prop="lastLeftQty" :label="$t('left.LastLeftQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="primary" effect="plain">
									{{ scope.row.lastLeftQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="sceneLeftQty" :label="$t('left.SceneLeftQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="success" effect="plain">
									{{ scope.row.sceneLeftQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="outQty" :label="$t('left.OutQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="warning" effect="plain">
									{{ scope.row.outQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="inTotalQty" :label="$t('left.InTotalQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="danger" effect="plain">
									{{ scope.row.inTotalQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="putoutMaterialCode" :label="$t('left.PutoutMaterialCode')"
							show-overflow-tooltip />
						<el-table-column prop="okOutQty" :label="$t('left.OKOutQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="info" effect="plain">
									{{ scope.row.okOutQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="errorOutQty" :label="$t('left.ErrorOutQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="primary">
									{{ scope.row.errorOutQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="outTotalQty" :label="$t('left.OutTotalQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="success">
									{{ scope.row.outTotalQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="differenceQty" :label="$t('left.DifferenceQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="success" effect="plain">
									{{ scope.row.differenceQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="shouldLeftQty" :label="$t('left.ShouldLeftQty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="warning" >
									{{ scope.row.shouldLeftQty }}
								</el-tag>
							</template>
						</el-table-column>
					</el-table>

					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
						v-bind="state.pagination" />
				</div>
			</el-tab-pane>
			<el-tab-pane :label="$t('left.leftMaterial')" name="second" class="h-full">
				<leftmaterialList />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { TabsPaneContext } from 'element-plus';
import { gtLeftMaterialRecords } from '/@/api/platform/report/leftmaterial';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
// 引入组件
const leftmaterialList = defineAsyncComponent(() => import('./list.vue'));


const activeName = ref('first');
const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const produceEndTime = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}

//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		StartDate: produceEndTime.value ? getYMD(produceEndTime.value[0]) : '',
		EndDate: produceEndTime.value ? getYMD(produceEndTime.value[1]) : '',
	},
	pageList: gtLeftMaterialRecords,
});
// 清空搜索条件
const resetQuery = () => {
	produceEndTime.value = '';
	state.queryForm.StartDate = '';
	state.queryForm.EndDate = '';
	getDataList(false);
};
//搜索
const query = () => {
	state.queryForm.StartDate = produceEndTime.value ? getYMD(produceEndTime.value[0]) : '';
	state.queryForm.EndDate = produceEndTime.value ? getYMD(produceEndTime.value[1]) : '';
	getDataList();
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

</script>
<style scoped>
.card-tabs>.el-tabs__content {
	padding: 2px;
}
</style>
